<!--  -->
<template>
  <div class="container">
    <!-- 面包屑 -->
    <el-breadcrumb :separator-icon="ArrowRight" class="first-class-bread" >
      <el-breadcrumb-item class="first-class-bread-item" to="/"
        >首页</el-breadcrumb-item
      >
      <el-breadcrumb-item
        :to="`/category/${category.first.id}`"
        class="first-class-bread-item"
        >{{ category.first.name }}</el-breadcrumb-item
      >
      <transition name="fade-right" mode="out-in">
        <el-breadcrumb-item :key="category.second.id">{{
          category.second.name
        }}</el-breadcrumb-item>
      </transition>
    </el-breadcrumb>
    <!-- 筛选区 -->
    <SubFilter @filter-change="changeFilter" />
    <!-- 结果区域 -->
    <div class="goods-list">
      <!-- 排序 -->
      <SubSort @sort-change="changeSort" />
      <!-- 列表 -->
      <ul>
        <li v-for="item in goodsList" :key="item.id">
          <GoodsItem :goods="item" />
        </li>
      </ul>
      <!-- 加载 -->
      <XtxInfiniteLoading
        :loading="loading"
        :finished="finished"
        @infinite="getData"
      />
    </div>
  </div>
</template>

<script>
import { ArrowRight } from "@element-plus/icons";
import { computed, ref, watch } from "vue";
import { useRoute } from "vue-router";
import { getItem } from "@/utils/storage.js";
import SubFilter from "./components/sub-filter";
import SubSort from "./components/sub-sort";
import GoodsItem from "./components/goods-item";
import { findSubCategoryGoods } from "../../api/category";
export default {
  name: "SubCategory",
  components: {
    SubFilter,
    SubSort,
    GoodsItem,
  },
  setup() {
    const route = useRoute();
    // . 通过计算属性得到，二级类目的名称和ID，一级类目的名称和ID
    const category = computed(() => {
      const obj = {};
      getItem("rabbit-xianer-mall").category.list.forEach((first) => {
        first.children.forEach((second) => {
          if (second.id === route.params.id) {
            // 设置二级分类
            obj["second"] = { id: second.id, name: second.name };
            // 设置一级类目
            obj["first"] = { id: first.id, name: first.name };
          }
        });
      });
      return obj;
    });
    // 1. 基础布局
    // 2. 无限加载组件
    // 3. 动态加载数据且渲染
    // 4. 任何筛选条件变化需要更新列表

    const loading = ref(false);
    const finished = ref(false);
    const goodsList = ref([]);
    // 查询参数
    let reqParams = {
      page: 1,
      pageSize: 20,
      categoryId: route.params.id,
    };
    watch(
      () => route.params.id,
      (newval) => {
        if (route.path === `/category/sub/${newval}`) {
          reqParams.categoryId = newval;
          reqParams.page = 1;
          goodsList.value = [];
          finished.value = false;
        }
      }
    );
    const getData = async () => {
      // 开启加载
      loading.value = true;
      const res = await findSubCategoryGoods(reqParams);
      if (res.result.items.length) {
        reqParams.page += 1;
        goodsList.value.push(...res.result.items);
        // 关闭加载
        loading.value = false;
      } else {
        // 数据全部加载完毕，没有多余的数据了
        loading.value = false;
        finished.value = true;
      }
    };
    // 监听筛选区改变
    const changeFilter = (filterParams) => {
      reqParams = { ...reqParams, ...filterParams };
      reqParams.page = 1;
      goodsList.value = [];
      getData()
    };
    // 监听排序改变
    const changeSort = (sortParams) => {
      reqParams = { ...reqParams, ...sortParams };
      reqParams.page = 1;
      goodsList.value = [];
      getData()
      console.log(reqParams);
    };
    return {
      ArrowRight,
      category,
      loading,
      finished,
      goodsList,
      getData,
      changeSort,
      changeFilter,
    };
  },
};
</script>
<style lang='less' scoped>
:deep(.first-class-bread) {
  padding: 20px 0;
  .el-breadcrumb__inner.is-link {
    font-weight: unset !important;
  }
  .first-class-bread-item:hover {
    span {
      color: @xtxColor;
    }
  }
}
.goods-list {
  background: #fff;
  padding: 0 25px;
  margin-top: 25px;
  ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0 5px;
    li {
      margin-right: 20px;
      margin-bottom: 20px;
      &:nth-child(5n) {
        margin-right: 0;
      }
    }
  }
}
:deep(.infinite-list-wrapper) {
  text-align: center;
  .list {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
  }
}
</style>